<template>
    <h1>管理员列表</h1>
    <div>
        <input type="text" v-model="state.mzhanghao">
        <input type="text" v-model="state.mphone">
        <input type="button" value="查询" @click="showmem">
        <input type="button" value="批量删除" @click="">
        <input type="button" value="导出" @click="dao">
<table border="">
    <tr>
        <td>账号</td>
        <td>密码</td>
        <td>姓名</td>
        <td>电话</td>
        <td>名称</td>
        <td>图片</td>
        <td>类型</td>
        <td>时间</td>
        <td>操作</td>
    </tr>
    <tr v-for="item in list">
        <td>{{ item.mzhanghao}}</td>
        <td>{{ item.mpwd}}</td>
        <td>{{ item.mname}}</td>
        <td>{{ item.mphone}}</td>
        <td>{{ item.mnames}}</td>
        <td><img :src="item.image" alt="" width="50px" height="50px"></td>
        <td>{{ item.mleix=1?"已完成":"未完成"}}</td>
        <td>{{ item.mdate}}</td>
        <td> <input type="button" value="删除" @click="shan(item.mid)">
            <input type="button" value="修改" @click="xiu(item.mid)"></td>
    </tr>
    
</table>
<a>
    共{{ count }}数，每页{{ state.size }}条，共{{ state.index }}/{{ pcount  }}页
    <input type="button" value="首页" @click="fenye(0)">
    <input type="button" value="上一页" @click="fenye(-1)">
    <input type="button" value="下一页" @click="fenye(1)">
    <input type="button" value="尾页" @click="fenye(9)">
</a>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter()
const route = useRoute()
const data:any = reactive({
    state: {
        mzhanghao: '',
        mphone: '',
        index: 1,
        size: 2,
    },

    list:[],
    count:0,
    pcount:0
})


const { state,list,count,pcount } = toRefs(data)

onMounted(() => {
    showmem()
})

const dao=()=>{
    location.href='https://localhost:7046/api/Member/ExportExcel'
}

const showmem = () => {
    axios({
        url:'https://localhost:7046/api/Member/ShowMember',
        method:'get',
        params: state.value
    }).then((res) => {
        list.value = res.data.data
        count.value = res.data.count
        pcount.value = res.data.pcount
    })
}

const fenye = (i:number) => {
    if(i==0)
    {
        state.value.index = 1
    }
    else
    {
        if(i==-1||i==1)
        {
            if(i==-1&&state.value.index==1)
            {
                return
            }
            if(i==1&&state.value.index==pcount.value)
            {
                return
            }
            state.value.index += i
        }
        if(i==9)
        {
            state.value.index = pcount.value
        }
        showmem()
        
    }
}
const shan=(id:number)=>{
    if(confirm('确定删除吗？')){
        axios({
        url:'https://localhost:7046/api/Member/shanMember',
        method:'get',
        params:{mid:id}
    }).then((res)=>{
        if(res.data.data>0)
        {
            alert('删除成功')
        }
        else
        {
            alert('删除失败')
        }
        showmem()
    })
    }
   
}

const xiu=(mid:number)=>{
    router.push({path:'/xiuMember',query:{mid:mid}})
}
</script>

<style scoped>

</style>